import React,{Component} from 'react'
import { Divider } from 'antd'
import AssetTagMenu from 'components/asset-tag-menu'
import AssetTagDetail from 'components/asset-tag-detail'
import AssetTagEchart from 'components/asset-tag-echart'
import {inject, observer} from 'mobx-react'
import './index.less'
import AssetTagAdd from 'components/asset-tag-add'
/**
 * 名称：标签中心
 * 描述：分为标签菜单、标签明细、标签关联活动三栏
 * 调用：主页面
 * 输入：tagStore 标签相关存储
 * 时间：20220403
 */
 @inject('tagStore')
 @observer
class AssetTag extends Component{
    /**
     * 标签中心左侧菜单项选中一个标签时的操作
     * 描述：更新标签明细、相关活动、衍生标签
     * @param {*} tagKey 
     */
    onTagSelect = (tagKey) => {
        const {tagStore} = this.props
        tagStore.setTagDetailByKey(tagKey)
        tagStore.setRelatedActivityByKey(tagKey)
        tagStore.setDerivedTagByKey(tagKey)
    }
    render(){
        const {tagStore} = this.props
        const {tagName,relatedActivityItems,derivedTagItems} = tagStore
        const store = {
            tagName,relatedActivityItems,derivedTagItems
        }
        return (
            <div className ="asset-tag" >
                <div className='tag-menu'>

                    <AssetTagAdd/>
                    <AssetTagMenu showAllStatus={true} onTagSelect={(tagKey)=>this.onTagSelect(tagKey)}/>
                    <Divider type="vertical"/>
                </div>
                <div className='tag-info'>
                    <AssetTagDetail/>
                    <Divider/>
                    <AssetTagEchart store={store}/>
                </div>
            </div>
        )
    }

}

export default AssetTag